<template>
  <view
    class="w-100"
    @click="show()"
  >
    <slot></slot>
    <dialog-x
      :visible.sync="chooseDialogVisible"
      title="请选择所在位置"
    >
      <view
        class="selector"
        :index="reviewSelector"
      >
        <view class="selector-item">
          <scroll-view
            scroll-y
            class="selector-item-scroll"
            :scroll-into-view="'province_' + seleted.province.id"
          >
            <view
              class="selector-item-scroll-item"
              v-for="(item, index) in province"
              :key="index"
              @click="selectProvince(item)"
            >
              <view
                class="selector-item-scroll-item-text"
                :id="'province_' + item.id"
                :class="seleted.province.id === item.id ? 'active' : ''"
              >
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="selector-item">
          <scroll-view
            scroll-y
            class="selector-item-scroll"
            :scroll-into-view="'city_' + seleted.city.id"
          >
            <view
              class="selector-item-scroll-item"
              v-for="(item, index) in city"
              :key="index"
              @click="selectCity(item)"
            >
              <view
                class="selector-item-scroll-item-text"
                :id="'city_' + item.id"
                :class="seleted.city.id === item.id ? 'active' : ''"
              >
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="selector-item">
          <scroll-view
            scroll-y
            class="selector-item-scroll"
            :scroll-into-view="'district_' + seleted.district.id"
          >
            <view
              class="selector-item-scroll-item"
              v-for="(item, index) in district"
              :key="index"
              @click="selectDistrict(item)"
            >
              <view
                class="selector-item-scroll-item-text"
                :id="'district_' + item.id"
                :class="seleted.district.id === item.id ? 'active' : ''"
              >
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </dialog-x>
  </view>
</template>

<script>
  import { apiGetRegionByParentId } from "@/api/common/region";
  export default {
    props: {
      provinceId: {
        type: [Number, String],
        default: 0,
      },

      cityId: {
        type: [Number, String],
        default: 0,
      },

      districtId: {
        type: [Number, String],
        default: 0,
      },
    },
    data() {
      return {
        chooseDialogVisible: false,
        province: [],
        city: [],
        district: [],

        seleted: {
          province: {},
          city: {},
          district: {},
        },

        reviewSelector: 0,
      };
    },
    async mounted() {
      this.$nextTick(async () => {
        await this.review();
      });
    },
    methods: {
      getRegion(parentId = 0) {
        return new Promise((resolve, reject) => {
          apiGetRegionByParentId(parentId)
            .then((res) => {
              resolve(res.data);
            })
            .catch((err) => {
              reject(err);
            });
        });
      },

      async getProvince() {
        const res = await this.getRegion();
        this.province = res;
      },

      async getCity(parentId) {
        const res = await this.getRegion(parentId);
        this.city = res;
      },

      async getDistrict(parentId) {
        const res = await this.getRegion(parentId);
        this.district = res;
      },

      selectProvince(item) {
        this.seleted.province = item;
        this.seleted.city = {};
        this.seleted.district = {};
        this.city = [];
        this.district = [];
        this.getCity(item.id);
      },

      selectCity(item) {
        this.seleted.city = item;

        this.seleted.district = {};
        this.district = [];
        this.getDistrict(item.id);
      },

      selectDistrict(item) {
        this.seleted.district = item;
        this.hide();
        // 所选的省市区名称组合
        const provinceName = this.seleted.province.name;
        const cityName = this.seleted.city.name;
        const districtName = this.seleted.district.name;
        let address = ``;
        if (provinceName) {
          address += provinceName;
        }
        if (cityName) {
          address += ` ${cityName}`;
        }
        if (districtName) {
          address += ` ${districtName}`;
        }
        this.$emit("change", {
          address,
          ...this.seleted,
        });
      },

      async review() {
        await this.getProvince();
        if (this.provinceId) {
          await this.getCity(this.provinceId);
        }

        if (this.cityId) {
          await this.getDistrict(this.cityId);
        }

        this.seleted.province = this.province.find((item) => item.id === this.provinceId) || {
          name: "",
        };

        this.seleted.city = this.city.find((item) => item.id === this.cityId) || { name: "" };

        this.seleted.district = this.district.find((item) => item.id === this.districtId) || {
          name: "",
        };

        let address = ``;
        if (this.seleted.province.name) {
          address += this.seleted.province.name;
        }
        if (this.seleted.city.name) {
          address += ` ${this.seleted.city.name}`;
        }

        if (this.seleted.district.name) {
          address += ` ${this.seleted.district.name}`;
        }

        this.$emit("review", {
          address,
          ...this.seleted,
        });
      },

      async show() {
        this.chooseDialogVisible = true;
        this.seleted.province = {};
        this.seleted.city = {};
        this.seleted.district = {};

        this.$nextTick(async () => {
          await this.review();
        });
      },
      hide() {
        this.chooseDialogVisible = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .selector {
    display: flex;
    flex-direction: row;
    height: 400rpx;
    width: 100%;

    &-item {
      flex: 1 1 33.33%;
      height: 100%;
      overflow: hidden;
      border-right: 1px solid #e5e5e5;
      &-scroll {
        height: 100%;
        &-item {
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          &-text {
            font-size: 28rpx;
            color: #333;
            &.active {
              color: #7850c8;
            }
          }
        }
      }
    }
  }
</style>
